<template>
    <div>
        <el-card>
            <template #header>
                <div class='card-header'>
                    <span>报告详情</span>
                </div>
            </template>

            <el-tabs type='border-card'>
                <el-tab-pane label='委托方信息'>
                    {{ details?.client?.client }}
                    {{ details?.project?.project }}
                </el-tab-pane>
                <el-tab-pane label='委托单'>
                    <v-form-render
                        ref='vFormRef1'
                        :form-data='formData1.list'
                        :form-json='formJson1'
                        :option-data='optionData'
                        class='v'
                    />
                </el-tab-pane>
                <el-tab-pane label='检测报告单'>
                    <v-form-render
                        ref='vFormRef2'
                        :form-data='formData2.list'
                        :form-json='formJson2'
                        :option-data='optionData'
                        class='v'
                    />

                    <div class='btnGroup'>
                        <el-button
                            v-if='details?.report?.state == "已完成"'
                            @click='Print'
                        >打印
                        </el-button>

                        <el-button
                            v-if='details?.report?.state == "已取样待检测"'
                            v-action='"check_jianyan"'
                            @click='doReport(0)'
                        >提交检测数据
                        </el-button>
                        <el-button v-if='details?.report?.state == "已检测待审核"' v-action='"check_sh"' @click='doReport(1)'>
                            审核检测数据
                        </el-button>
                        <el-button
                            v-if='details?.report?.state == "已审核待复审"'
                            v-action='"check_jsfz"'
                            @click='doReport(2)'
                        >下发报告
                        </el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-card>

        <!--    密码窗-->

        <el-dialog
            v-model='password2Show'
            title='请输入确认密码,一旦操作无法撤回'
            width='30%'
        >
            <span>请输入确认密码</span>
            <el-input v-model='password2' autocomplete='off'/>

            <template #footer>
                <span class='dialog-footer'>
                    <el-button @click='password2Show = false'>取消</el-button>
                    <el-button
                        type='primary'
                        @click='doAction_'
                    >确认</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<script lang='ts'>
import { defineComponent, nextTick, reactive, ref } from 'vue'
import { getDetails, sh, jsfz, jianyan } from '/@/api/Reports'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import { useLayoutStore } from '/@/store/modules/layout'

import router from '/@/router'

// 获取单个委托单详情-->
const details = ref()
// 两个表单.
const vFormRef1 = ref()
const vFormRef2 = ref()
// 表单
const formJson1 = reactive({ widgetList: [], formConfig: {} })
const formJson2 = reactive({ widgetList: [], formConfig: {} })
// 两个表单的数据.
const formData1 = reactive({ list: [] })
const formData2 = reactive({ list: [] })
const optionData = reactive({})
const password2Show = ref(false)
const password2 = ref()
const doAction = ref(-1)

const doReport = t => {
    password2Show.value = true
    doAction.value = t
}

// 确认操作
const doAction_ = () => {
    if (password2.value == '') {
        ElMessage.error('请输入确认密码')
        return
    }
    // 根据doAction的值,执行不同的操作.
    switch (doAction.value) {
    case 0:
        // 提交检测数据
        vFormRef2.value.getFormData()
            .then(formData => {
                let check_data = JSON.stringify(formData)
                let data = {
                    password2: password2.value,
                    check_data
                }
                jianyan(details.value.report.id, data)
                    .then(res => {
                        ElMessage.success('提交检测数据成功')
                        // 刷新当前路由.
                        router.replace(`/redirect/Reports/ReportsDetails/${details.value.report.id}`)
                    })
                doAction.value = -1
                password2Show.value = false
            })
            .catch(error => {
                ElMessage.error(error)
            })
        break
    case 1:
        sh(details.value.report.id, { password2: password2.value })
            .then(res => {
                ElMessage.success('审核检测数据成功')
                // 刷新当前路由.
                router.replace(`/redirect/Reports/ReportsDetails/${details.value.report.id}`)

            })
            .catch(error => {
                ElMessage.error(error)
            })
        // 审核检测数据
        doAction.value = -1
        password2Show.value = false
        break
    case 2:
        jsfz(details.value.report.id, { password2: password2.value })
            .then(res => {
                ElMessage.success('报告下发成功')
                // 刷新当前路由.
                router.replace(`/redirect/Reports/ReportsDetails/${details.value.report.id}`)

            })
            .catch(error => {
                ElMessage.error(error)
            })
        // 下发报告
        doAction.value = -1
        password2Show.value = false
        break
    }

}

const getCheckTypeDetail = async(id: string) => {
    const res = await getDetails(id)
    let temp = JSON.parse(res.data.data?.report?.form)
    details.value = res.data.data

    formJson1.widgetList = temp.widgetList
    formJson1.formConfig = temp.formConfig

    let temp2 = JSON.parse(res.data.data?.report?.checkForm)
    formJson2.widgetList = temp2.widgetList
    formJson2.formConfig = temp2.formConfig
    // formData1.value = JSON.parse(res.data.data?.report?.jsonData)

    for (let parseKey in JSON.parse(res.data.data?.report?.jsonData)) {
        formData1.list[parseKey] = JSON.parse(res.data.data?.report?.jsonData)[parseKey]
        nextTick(() => {
            vFormRef1.value.setFieldValue(parseKey, JSON.parse(res.data.data?.report?.jsonData)[parseKey])
        })
    }
    nextTick(() => {
        vFormRef1.value.disableForm()
    })
    //
    if (res.data.data.report.state != '已取样待检测') {
        for (let parseKey in JSON.parse(res.data.data?.report?.checkJsonData)) {
            formData2.list[parseKey] = JSON.parse(res.data.data?.report?.checkJsonData)[parseKey]
            nextTick(() => {
                vFormRef2.value.setFieldValue(parseKey, JSON.parse(res.data.data?.report?.checkJsonData)[parseKey])
            })
        }

        nextTick(() => {
            vFormRef2.value.disableForm()
        })
    }
}

const init = (id: string) => {
    getCheckTypeDetail(id)
    return { details, formJson1, formJson2, formData1, formData2 }
}

export default defineComponent({
    name: 'ReportsDetails',
    components: {},

    setup(props, { attrs, slots }) {
        const route = useRoute()
        const r = init(route.params.id, formJson1, formJson2)

        const Print = () => {
            let childWin = window.open(`/Reports/ReportsPrint/${route.params.id}`, 'blank', `width=${
                window.screen.availWidth - 20
            },height=${
                window.screen.availHeight - 90
            },top=0,left=0,status=no, toolbar=no,menubar=no,scrollbars=yes, resizable=no,location=no,z-look=yes`)
            // router.push({ path: `/Reports/ReportsPrint/${route.params.id}` })
            // window.onReady
            // childWin.onready = () => {
            //     childWin.print()
            // }
        }

        return {
            ...r,
            doReport,
            doAction_,
            password2Show,
            password2,
            vFormRef1,
            vFormRef2,
            optionData,
            Print
        }
    }
})
</script>

<!--<style>-->
<!--@media print {-->
<!--    *{-->
<!--        box-shadow: none;-->
<!--    }-->
<!--    .el-card.is-always-shadow{-->
<!--        box-shadow: none;-->
<!--    }-->
<!--    .layout-main-content{-->
<!--        background:none;-->
<!--    }-->
<!--    .page m-3 relative{-->
<!--        margin: 0;-->
<!--    }-->
<!--    .el-tabs__header .is-top{-->
<!--        display: none;-->
<!--    }-->
<!--    .el-card{-->
<!--        background:none;-->
<!--        border:none;-->
<!--        overflow: hidden;-->
<!--    }-->
<!--    .el-tabs&#45;&#45;border-card{-->
<!--        border:none;-->
<!--        background: none;-->
<!--        box-shadow: none;-->
<!--    }-->
<!--    .el-card__header{-->
<!--        display: none;-->
<!--    }-->
<!--    #app > div > div.layout-main.flex.flex-1.flex-col.overflow-x-hidden.overflow-y-auto > div.layout-main-content.flex-1.overflow-hidden > div > div.el-scrollbar__wrap.el-scrollbar__wrap&#45;&#45;hidden-default > div > div.el-card.is-always-shadow > div.el-card__body > div {-->
<!--        box-shadow: none;-->
<!--        border: none;-->
<!--    }-->

<!--    .el-card__body {-->
<!--        padding: 0;-->
<!--    }-->

<!--    #app > div > div.layout-main.flex.flex-1.flex-col.overflow-x-hidden.overflow-y-auto > div.layout-main-content.flex-1.overflow-hidden > div > div.el-scrollbar__wrap.el-scrollbar__wrap&#45;&#45;hidden-default > div > div.el-card.is-always-shadow > div.el-card__header {-->
<!--        display: none;-->
<!--    }-->

<!--    #app > div > div.layout-main.flex.flex-1.flex-col.overflow-x-hidden.overflow-y-auto > div.layout-main-content.flex-1.overflow-hidden > div > div.el-scrollbar__wrap.el-scrollbar__wrap&#45;&#45;hidden-default > div > div.el-card.is-always-shadow > div.el-card__body > div > div.el-tabs__header.is-top {-->
<!--        display: none;-->
<!--    }-->

<!--    #pane-2 > form {-->
<!--        display: block;-->
<!--        position: relative;-->
<!--        width: 100%;-->
<!--        height: 100%;-->
<!--        top: 0;-->
<!--        left: 0;-->
<!--        z-index: 999999;-->
<!--    }-->

<!--    #app > div > div.layout-main.flex.flex-1.flex-col.overflow-x-hidden.overflow-y-auto > div.layout-main-navbar.flex.justify-between.items-center.h-12.shadow-sm.overflow-hidden.relative.z-10 {-->
<!--        display: none;-->
<!--    }-->

<!--    #app > div > div.layout-main.flex.flex-1.flex-col.overflow-x-hidden.overflow-y-auto > div.layout-main-tags.h-8.leading-8.text-sm.text-gray-600.relative {-->
<!--        display: none;-->
<!--    }-->

<!--    #app > div > div.layout-sidebar.flex.flex-col.h-screen.transition-width.duration-200.shadow.w-64 {-->
<!--        display: none;-->
<!--    }-->

<!--    #app > div > div.layout-sidebar-sidesetting.fixed.right-0.top-64.z-10 {-->
<!--        display: none;-->
<!--    }-->

<!--    #\31 \.23452384164\.123412416 {-->
<!--        display: none;-->
<!--    }-->

<!--    /*去掉表格样式,便于打印*/-->
<!--    tbody tr td input[type=text] {-->
<!--        height: 100%;-->
<!--        background: none;-->
<!--        border: none;-->
<!--    }-->

<!--    /* 去掉必填选项的星号 */-->
<!--    .el-form-item__label:before {-->
<!--        display: none;-->
<!--    }-->
<!--}-->

<!--/* 未打印时样式 方便提醒*/-->
<!--.v tbody tr td input[type=text] {-->
<!--    height: 100%;-->
<!--    border-color: red;-->
<!--}-->

<!--/*长宽比改为A4纸大小*/-->
<!--.A4 {-->
<!--    background-color: #fff;-->
<!--    padding-bottom: calc(100% * 1.414286 / 1);-->
<!--}-->

<!--.v tbody {-->
<!--    border: 2px solid #333 !important;-->
<!--}-->

<!--.v tbody tr td {-->
<!--    border: 1px solid #333 !important;-->
<!--}-->

<!--.v div.sub-form-action-column .el-button {-->
<!--    font-size: initial;-->
<!--    padding: 8px;-->
<!--    background: initial;-->
<!--    border: initial;-->
<!--}-->
<!--</style>-->
<!--<style scoped>-->
<!--@media print {-->
<!--    .btnGroup {-->
<!--        display: none;-->
<!--    }-->
<!--}-->

<!--</style>-->
